<div class="container-fluid">
  <div class="row studio-well">
    <div class="col-md-2">

      <div class="row">
        <i class="icon-angle-right"></i> Server: <b>{{selectedServer}}</b>
      </div>

    </div>

    <div class="col-md-10">
      <div class="col-md-4">
        <div class="row">
          <i class="icon-angle-right"></i> Status: <b>{{server.status}}</b>
        </div>
        <div class="row">
          <i class="icon-angle-right"></i> Version :
          <b>{{server.version}}</b>
        </div>
        <div class="row">
          <i class="icon-angle-right"></i> Address: <b>{{server.addresses}}</b>
        </div>
      </div>
      <div class="col-md-4">
        <div class="row">
          <i class="icon-angle-right"></i> Java vendor: <b>{{server.javaVendor}} </b>
        </div>
        <div class="row">
          <i class="icon-angle-right"></i> Java version: <b>{{server.javaVersion}}</b>
        </div>
        <div class="row">
          <i class="icon-angle-right"></i> Num.CPU: <b>{{server.cpus}}</b>
        </div>
      </div>
      <div class="col-md-4">
        <div class="row">
          <i class="icon-angle-right"></i> Os name: <b>{{server.osName}} </b>
        </div>
        <div class="row">
          <i class="icon-angle-right"></i> Os version: <b>{{server.osVersion}}</b>
        </div>
        <div class="row">
          <i class="icon-angle-right"></i> Os arch: <b>{{server.osArch}} </b>
        </div>
      </div>
    </div>
  </div>

  <div class="row row-space">
    <div>
      <ul class="nav nav-tabs">
        <li [ngClass]="{'active' : tab === 'overview'}" (click)="tab = 'overview'"><a
            href="javascript:void(0)"><span>Overview</span></a></li>
        <li [ngClass]="{'active' : tab === 'monitoring'}" (click)="tab = 'monitoring'"><a
            href="javascript:void(0)"><span>Monitoring</span></a></li>
        <li [ngClass]="{'active' : tab === 'globalCfg'}" (click)="tab = 'globalCfg'"><a
            href="javascript:void(0)"><span>Global
              CFG
            </span></a></li>
      </ul>
      <div class="tab-content row">
        <server-management-overview *ngIf="tab === 'overview'" [name]="selectedServer" [stats]="currentStats">
        </server-management-overview>
        <server-management-monitoring *ngIf="tab === 'monitoring'" [name]="selectedServer">
        </server-management-monitoring>
        <global-configuration *ngIf="tab === 'globalCfg'" [name]="selectedServer"></global-configuration>
      </div>
    </div>

    <!-- <tabset>
      <tab title="Overview" template-url="views/server/general/overview.html"></tab>
      <tab title="Monitoring" template-url="views/server/general/monitoring.html"></tab>
      <tab title="Metrics" template-url="views/server/general/metrics.html"></tab>
      <tab title="Databases" template-url="views/server/general/db.html"></tab>
      <tab title="Warnings" template-url="views/server/general/warnings.html"></tab>
      <tab title="Logs" template-url="views/server/general/log.html"></tab>
      <tab title="Plugins" template-url="views/server/general/plugins.html"></tab>
      <tab title="Global Cfg" template-url="views/server/general/config.html"></tab>
      <tab title="Server Cfg" template-url="views/server/general/configuration.html"></tab>
    </tabset> -->
  </div>
</div>
